import { useSelector, useDispatch } from 'react-redux';
import { CombinedState } from 'reducers';
import { ObjectState } from 'cvat-core-wrapper';

import { collapseObjectItems } from 'actions/annotation-actions';

export default function useAnnotationDetail(clientID: number) {
    const { states } = useSelector((state: CombinedState) => state.annotation.annotations);
    const objectState: ObjectState | null =
        (states as ObjectState[]).find((el: ObjectState) => el.clientID === clientID) || null;

    const dispatch = useDispatch();

    const {
        annotation: {
            annotations: { collapsedAll, collapsed: statesCollapsed },
        },
    } = useSelector((state: CombinedState) => state);

    const collapsed =
        typeof statesCollapsed[clientID as number] === 'undefined' ? collapsedAll : statesCollapsed[clientID];

    const collapse = (): void => {
        dispatch(collapseObjectItems([objectState], !collapsed));
    };
    return {
        objectState,
        collapsed,
        collapse,
    };
}
